<template>
	<view id="feature-content">
		<view class="top-banner">
			<image src="../../static/Dp/Logo_487x93.png" mode="widthFix"></image>
		</view>
		<view class="title-area">
			<view class="main-title">
				五寨乡埔坪村数字博物馆
			</view>
			<view class="sub-title">
				挖掘家族历史 守护迁台记忆
			</view>
		</view>
		<image class="big-logo" src="../../static/Dp/Bg-Logo_114x160.png" mode="widthFix"></image>
		<view class="feature-text">
			内容精选
		</view>
		<view v-for="(v, k) in row1" :key="k" @click="redirectTo(v)" class="item">
			<image :src="`https://www.lin-home.com/static/DigitalPlatform/v3/${v.title}.jpg?v=${random}`" alt="v.title" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	// 黄玺 @ 2023-4-19
	import {
		domain
	} from '../../stores/useApp.js'
	import {
		ref
	} from 'vue';
	import setShare from '../../share.js'
	setShare({
		title: '数字博物馆 - 云上埔坪',
		path: "/pages/DigitalPlatform/FeatureContent"
	});
	let row1 = [{
			title: "迁台渊源",
			url: "relocation"
		},
		{
			title: "发展历程",
			url: "History"
		},
		{
			title: "林氏家系",
			url: "LinFamilyLineage"
		},
		{
			title: "家国情怀",
			url: "HomeAndCountryFeelings"
		},
		{
			title: "宗祠家庙",
			url: "AncestralTemple"
		},
		{
			title: "文书档案",
			url: "Paperwork"
		},
		{
			title: "两岸交流",
			url: "exchange"
		},
		// {
		// img: "../../static/DigitalPlatform/林氏足迹.png",
		// 	title: "林氏足迹",
		// 	url: "LinFamilyLineage"
		// },
	]

	function redirectTo(item) {
		let url = `/pages/DigitalPlatform/${item.url}?title=${item.title}`;
		uni.redirectTo({
			url
		})
	}
	
	let random = Math.random();
</script>

<style lang="less">
	@import url(shared.less);
	@title-size: 35rpx;
	#feature-content {
		
		.title-area {
			margin: 90rpx 0 150rpx @spacing;
			line-height: 1;
			z-index: 9;
			position: relative;
			.main-title {
				font-weight: bold;
				font-size: 47rpx;
				color: @text-color;
			}
			.sub-title {
				font-size: 25rpx;
				margin-top: 20rpx;
				color: @text-color;
			}
		}
		
		.big-logo {
			width: 270rpx;
			position: absolute;
			top: calc(var(--status-bar-height) + 120rpx);
			right: 0rpx;
		}
		
		.feature-text {
			font-size: 40rpx;
			color: @text-color;
			margin-left: @spacing;
		}
		
		background: @bg-color;
		box-sizing: border-box;
		padding-bottom: @spacing;
		
		.item {
			display: block;
			position: relative;
			image {
				width: calc(100vw - @spacing * 2);
				margin: @spacing auto;
				display: block;
				border-radius: 5px;
				box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.58);
			}
			margin-top: 30upx;
		}
	}
</style>